<style>
</style>
<template>
    <ly-page>
        <ly-navi type="title" title="权限管理页"></ly-navi>
        <ly-page-content>
            <ly-tip>
                <p style="color: #FE707D">当前用户角色 : {{current_role}}</p>
                <p>
                    当前的所有权限数据都为测试数据,数据存在本地 localStorage 正式使用时需要修改为提交到服务端
                </p>
                <p>
                    防止大家勿设置,演示站点所有角色强制添加了 权限管理页的权限
                </p>
                <p style="color: #FE707D">
                    注意上方 平台 和 测试 的主菜单 只有同时拥有权限时才会显示
                </p>
            </ly-tip>
            <div v-mb >
                <el-button v-role.super type="primary" size="small">只有超管可以看到</el-button>
                <el-button v-role:role.action1 type="primary"  size="small">演示权限点1</el-button>
                <el-button v-role:role.action2 type="primary" size="small">演示权限点2</el-button>
                <el-button v-role:role.action3 type="primary" size="small">演示权限点3</el-button>
            </div>

            <el-button style="float: right" v-mb type="primary" @click="addRole" size="small">添加角色</el-button>
            <el-table v-table-affix :data="store.data" v-loading="store.loading" @sort-change="store.sort($event)">

                <el-table-column width="200" label="名称" prop="name">
                    <template slot-scope="scope">
                            {{scope.row.name}} ({{scope.row.code}})
                    </template>
                </el-table-column>
                <el-table-column label="描述" prop="description">
                </el-table-column>
                <el-table-column width="300" label="操作">
                    <template slot-scope="scope">
                        <ly-button-group  :size="3">
                            <el-button v-show="scope.row.code!=='super'" @click = "editRole(scope.row)" type="primary" size="mini">编辑</el-button>
                            <el-button v-show="scope.row.code!=='super'" @click = "deleteRole(scope.row)" type="danger" size="mini">删除</el-button>
                            <el-button @click = "testRole(scope.row)" type="danger" size="mini">模拟角色</el-button>
                        </ly-button-group>
                    </template>
                </el-table-column>
            </el-table>
            <ly-pagination :store="store"></ly-pagination>
        </ly-page-content>
    </ly-page>
</template>
<script>
    //这里定义组件
    Rap.define([], function () {
        return {
            data: function () {

                var store = Ly.dataStore({
                    data: function () {
                        var roles=localStorage.getItem('ly-test-roles');
                        if(!roles){
                            roles=JSON.stringify([{
                                name: '超级管理员',
                                code: 'super',
                                description: '超级管理员,拥有全部权限,内置角色不可以删除'
                            }, {
                                name: '销售',
                                code: 'seller',
                                description: '销售--可以管理销售相关菜单'
                            }, {
                                name: '客服',
                                code: 'kefu',
                                description: '客服--可以管理客服相关菜单'
                            }]);
                            localStorage.setItem('ly-test-roles',roles);
                        }
                        roles=JSON.parse(roles);
                        return roles;
                    }
                });
                store.load(1);
                return {
                    store: store,
                    current_role:''
                }
            }, created: function () {
                this.current_role=Ly.role.config().role;
            }, init: function (query) {
            },
            methods: {
                addRole: function () {
                    var me=this;
                    Ly.pop('edit', {}, {
                        'submit': function () {
                            me.store.load(1);
                        }
                    })
                }, editRole: function (role) {
                    var me=this;
                    Ly.pop('edit', {role_code: role.code}, {
                        'submit': function () {
                            me.store.load(1);
                        }
                    })
                }, deleteRole: function (role) {
                    var me=this;
                    App.$confirm('你确定删除选中权限吗?').then(function () {
                        var roles=localStorage.getItem('ly-test-roles');
                        roles=JSON.parse(roles);
                        var role_map = _.indexBy(roles,'code');
                        roles.remove(role_map[role.code]);
                        localStorage.setItem('ly-test-roles',JSON.stringify(roles));
                        me.store.load(1);
                    });
                },testRole:function (role){
                    localStorage.setItem('ly-test-role',JSON.stringify(role));
                    location.reload();
                }
            }
        }
    })
</script>


